<template>
  <div :style="{ width: '100%', height: '100%' }" ref="homeEch"></div>
</template>

<script>
export default {
  name: "Age",
  data() {
    return {
      data: [],
      agelist: [{}],
      obj:{}
    };
  },
  created() {
    // this.echarts();
  },
  async mounted() {
    await this.getList();
   
    this.resizefun = () => {
        
      this.$echarts.init(this.$refs.homeEch).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    //
    getList() {
      let that = this;
      that.axios
        .post(`${that.$store.state.http}/list/getEchartsData_RCYY_RYLD`,{
            para:{where:{}}
        })
        .then((res) => {
          that.obj = res.data;
          that.echarts();
        });
    },
    echarts() {
      //   let that = this;
      let myChart = this.$echarts.init(this.$refs.homeEch);
      let json =
        '{"code":0,"data":{"one_label":"入职曲线","one_list":[["2019 年 01 月",102],["2019 年 02 月",104],["2019 年 03 月",137],["2019 年 04 月",30],["2019 年 05 月",318],["2019 年 06 月",619],["2019 年 07 月",132],["2019 年 08 月",21],["2019 年 09 月",12],["2019 年 10 月",7],["2019 年 11 月",4],["2019 年 12 月",7]],"two_label":"离职曲线","two_list":[["2019 年 01 月",0],["2019 年 02 月",0],["2019 年 03 月",7],["2019 年 04 月",0],["2019 年 05 月",14],["2019 年 06 月",14],["2019 年 07 月",1],["2019 年 08 月",0],["2019 年 09 月",0],["2019 年 10 月",0],["2019 年 11 月",3],["2019 年 12 月",0]]}}';
    //   let obj = JSON.parse(json);
      let obj = this.obj;
      let data = obj.data;
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          x: "center",
          data: ["入职曲线", "离职曲线"],
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data.one_list.map(function (item) {
            return item[0];
          }),
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "入职曲线",
            type: "line",
            data: data.one_list.map(function (item) {
              return item[1];
            }),
            itemStyle: {
              normal: {
                color: "#1afffd",
              },
            },
          },
          {
            name: "离职曲线",
            type: "line",

            data: data.two_list.map(function (item) {
              return item[1];
            }),
            itemStyle: {
              normal: {
                color: "#C43632",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>